<template>
  <div>
    <el-button type="text" @click="look">查看</el-button>
    <el-button type="text" @click="set">添加</el-button>
    <el-dialog title=" " :visible.sync="showLook">
      <el-table :data="productList">
        <el-table-column prop="product.name" label="名称" />
        <el-table-column prop="product.gpu_num" label="GPU(个)" />
        <el-table-column prop="product.cpu_num" label="CPU(豪核)" />
        <el-table-column prop="product.mem_num" label="内存(Mi)" />
        <el-table-column prop="product.rdma_num" label="RDMA网卡数量" />
        <el-table-column prop="name" label="操作">
          <template slot-scope="{ row }">
            <el-popover
              placement="top"
              width="80"
              trigger="click"
              v-model="row.visible"
            >
              <p>您确定要删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="row.visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="del(row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" type="text">
                <i class="el-icon-delete delete-btn" />
                删除
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button class="none-type" @click="showLook = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title=" " :visible.sync="showSet">
      <div class="add-user-box">
        <el-select
          v-model="addForm.product_id"
          placeholder="选择资源组"
          class="user-lis"
        >
          <el-option
            v-for="(e, i) in allProduct"
            :key="i"
            :label="e.name"
            :value="e.id"
          />
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">添 加</el-button>
        <el-button class="none-type" @click="showSet = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  organizationProductAll,
  addOrganizationProduct,
  delOrganizationProduct,
} from "@/api/org";
import { productsAdminAll } from "@/api/product";
export default {
  data() {
    return {
      showLook: false,
      showSet: false,
      addForm: { role: "2" },
      productList: [],
      allProduct: [],
    };
  },
  props: ["row"],
  async created() {},
  methods: {
    async getData() {
      let res = await organizationProductAll({ organizationId: this.row.id });
      this.productList = res.data;
    },
    async look() {
      this.getData();
      this.showLook = true;
    },
    async del(e) {
      console.log("e", e);
      await delOrganizationProduct({ id: e.id });
      this.getData();
    },
    async set() {
      await this.getData();
      console.log(this.productList);
      let productListIds = this.productList.map((e) => e.product.id);
      let res = await productsAdminAll();
      console.log(productListIds);
      console.log(res.data);
      this.allProduct = res.data.filter(
        (e) => productListIds.indexOf(e.id) === -1
      );
      this.showSet = true;
    },
    async submit() {
      await addOrganizationProduct({
        organization_id: this.row.id,
        ...this.addForm,
      });
      this.addForm = { role: "2" };
      this.showSet = false;
    },
    formatterRole({ role }) {
      let roleMap = {
        1: "管理员",
        2: "开发者",
      };
      return roleMap[role];
    },
  },
};
</script>
<style lang="less" scoped>
.add-user-box {
  display: flex;
  padding: 20px;

  .user-lis {
    flex: 1;
  }

  .role-lis {
    width: 120px;
    margin-left: 20px;
  }
}

.user-lis {
  li {
    overflow: hidden;
    border-bottom: 1px solid #ccc;

    .name {
      float: left;
      line-height: 40px;
      min-width: 120px;
    }

    .btn {
      float: left;
    }
  }
}
</style>
